<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学生系统页面</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>
	   	<style type="text/css">
			.td_1{
				text-align: right;
				width:50%;

			}
			.table_2{
				height: 38px;
				background-image:url(img/广科logo_3.jpg);
				background-size: 100% 40px;
				width: 100%;
			}
         .div_3{
			 border: 2px solid #7FFFD4;
			 width: 1173px;
			 display: flex;
			 flex-direction: column;
			 justify-content: center;
			 align-items: center;
         }
          </style>
	
	
	
	<body>
	    <div class="div_1 "> 
	    	<head>
           	<div class="div_2">
           	  <table class="table_2">
           		<tr class="tr_1">
           			<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
           		    <td><a href="StudentsSystem.html">选课中心</a>&nbsp;&nbsp;&nbsp;</td>
           			<td><a href="CourseGrade.html">查询成绩</a>&nbsp;&nbsp;&nbsp;</td>
           			<td><a href="#">查看课表</a> &nbsp;&nbsp;&nbsp;</td>

           			<td class="td_1"> 欢迎你 &nbsp;&nbsp;
						<button class="a_1" id="logout">退出登录</button>
           			</td>
           		</tr>
           	  </table>
			</div>
           	    <hr color="lightskyblue" />
             	<img src="img/广科logo.JPG" height="80px" width="100%" align="center"/> 	
           	    <hr color="lightskyblue" /> 
           	</div>
       	   </head>



			<div class="div_3">
				<h1 align="center">已选课程</h1>
				<h1 id="tips"></h1>
				<table border="1" id="table_content">
					<tr>
						<th>课程ID</th>
						<th>名称</th>
						<th>教师</th>
						<th>学分</th>
						<th>上课时间</th>
						<th>下课时间</th>
						<th>地点</th>
						<th>剩余</th>
						<th>总数</th>
						<th>退选</th>
					</tr>

				</table>
			</div>
          	
         
         
         
         <div class="div_4">
         	 <hr size="3" color="lightskyblue">
           	  <img src="img/尾巴.jpg" align="center" width="100%">
         </div>
			<script>
				getTableData()
				function getTableData(){
					$.ajax({
						type:"POST",
						url:"getAllSelectCourseServlet",
						contentType: "application/json; charset=utf-8",
						data:JSON.stringify({account:"1",password:"2"}),
						success:function(data){
							for (var item in data){
								console.log(item);
								$('#table_content').append(`

                        <tr>
                            <td>${data[item].course_id}</td>
                            <td>${data[item].course_name}</td>
                            <td>${data[item].teacher}</td>
                            <td>${data[item].point}</td>
                            <td>${data[item].timeon}</td>
                            <td>${data[item].timeend}</td>
                            <td>${data[item].location}</td>
                            <td>未知</td>
                            <td>${data[item].limited}</td>
                            <td><button onclick="show()">退选</button></p></td>
                        </tr>
                     `)
							}

						},
						error:function(jqXHR){
							console.log("Error: "+jqXHR.status);
						}
					});
				}

				$("#logout").click(
						function () {
							$.ajax({
								type:"POST",
								url:"logout",
								contentType: "application/json; charset=utf-8",
								data:{},
								success:function(data){
									console.log(data)
									alert(data.msg)
									window.location.href="index.html"
								},
								error:function(jqXHR){
									console.log("Error: "+jqXHR.status);
								}
							});
						}
				)
				function show() {
					alert("选课太火爆，暂时不能退选。");
				}
			</script>
	</body>
</html>